<template>
    <div :class="jobRootCls">
        <div :class="firstLineCls">
            <p :class="jobNameCls">{{item.job_name}}</p>
            <p v-if="!draftVisible" class="job_salary">
                <span style="font-size:12px;font-weight:bold;color:rgba(153, 153, 153, 1);">
                {{item.salary_tax}}
            </span>
                <span style="font-size:16px;font-weight:bold;color:rgba(241,92,24,1);">
                {{item.job_salary}}
            </span>
                <span style="font-size:12px;font-weight:bold;color:rgba(153, 153, 153, 1);">
                {{item.salary_period}}
            </span>
            </p>
        </div>
        <div v-if="!draftVisible" class="detail_group">
            <p>{{item.job_city}}</p>
            <p style="margin-left: 15px;margin-right: 15px;">|</p>
            <p>{{item.job_period}}</p>
            <p style="margin-left: 15px;margin-right: 15px;">|</p>
            <p>{{item.job_req}}</p>
            <p style="margin-left: 15px;margin-right: 15px;">|</p>
            <p>{{item.job_num}}</p>
        </div>
        <p :class="jobInfoCls">{{item.job_info}}</p>
        <p v-if="timeVisible" class="job_time">
            <span style="font-size:14px;font-weight:400;color:rgba(102,102,102,1);">
                {{item.job_time_tip}}
            </span>
            <span style="font-size:14px;font-weight:400;color:rgba(221, 58, 49, 1);">
                {{item.job_time}}
            </span>
        </p>
        <p v-if="reVisible" class="closed_cls">已关闭</p>
        <button v-if="editVisible" class="edit_class" :class="editPos" @click="clickEvent"
                data-ops="edit" :data-sid="item.server_id">编辑
        </button>
        <p v-if="validVisible" class="valid_pos" :class="validCls">{{item.job_flow}}</p>
        <button v-if="pauseVisible" class="pause_cls" @click="clickEvent"
                data-ops="pause" :data-sid="item.server_id">暂停
        </button>
        <button v-if="onlineVisible" class="online_cls" @click="clickEvent"
                data-ops="online" :data-sid="item.server_id">上线
        </button>
        <button v-if="reVisible" class="re_cls" @click="clickEvent"
                data-ops="republish" :data-sid="item.server_id">重新发布
        </button>
        <button v-if="draftVisible" class="del_cls" @click="clickEvent"
                data-ops="delete" :data-sid="item.server_id">删除
        </button>
    </div>
</template>

<script>
  export default {
    name: 'Job',
    props: {
      item: {
        type: Object,
        default: {
          server_id: 0,
          job_name: '职位名称',
          job_salary: '10-20W',
          salary_period: '/2年',
          job_city: '工作城市',
          job_period: '工作年限',
          job_req: '执业要求',
          job_num: '招聘人数',
          job_info: '2019-04-01 发布',
          job_time_tip: '有效期剩余',
          job_time: '20天',
          job_flow: '关闭职位'
        }
      }
    },
    computed: {
      jobRootCls: function() {
        return {
          'job-root': !this.draftVisible,
          'job-root-draft': this.draftVisible
        }
      },
      jobNameCls: function() {
        return {
          'job_name': !this.draftVisible,
          'job_name_draft': this.draftVisible
        }
      },
      firstLineCls() {
        return {
          'first_line': !this.draftVisible,
          'first_line_draft': this.draftVisible
        }
      },
      jobInfoCls: function() {
        return {
          'job_info': !this.draftVisible,
          'job_info_draft': this.draftVisible
        }
      },
      editVisible: function() {
        return this.item.job_flow === '待审核'
          || this.item.job_flow === '不通过'
          || this.item.job_flow === '开放职位'
          || this.item.job_flow === '暂停职位'
          || this.item.job_flow === '草稿'
      },
      timeVisible: function() {
        return this.item.job_flow === '待审核'
          || this.item.job_flow === '不通过'
          || this.item.job_flow === '开放职位'
          || this.item.job_flow === '暂停职位'
      },
      editPos: function() {
        return {
          'edit_pos_0': (this.item.job_flow === '待审核' || this.item.job_flow === '不通过'),
          'edit_pos_1': this.item.job_flow === '开放职位',
          'edit_pos_2': this.item.job_flow === '暂停职位',
          'edit_pos_4': this.item.job_flow === '草稿'
        }
      },
      validVisible: function() {
        return this.item.job_flow === '待审核'
          || this.item.job_flow === '不通过'
      },
      validCls: function() {
        return {
          'valid_cls_0': this.item.job_flow === '待审核',
          'valid_cls_1': this.item.job_flow === '不通过'
        }
      },
      pauseVisible: function() {
        return this.item.job_flow === '开放职位'
      },
      onlineVisible: function() {
        return this.item.job_flow === '暂停职位'
      },
      reVisible: function() {
        return this.item.job_flow === '关闭职位'
      },
      draftVisible: function() {
        return this.item.job_flow === '草稿'
      }
    },
    methods: {
      clickEvent: function(e) {
        let ops = e.target.dataset.ops
        let sid = e.target.dataset.sid
        this.$emit('click-which', ops, sid)
      }
    }
  }
</script>

<style scoped>
    p {
        margin: 0;
    }

    .job-root {
        width: 980px;
        height: 112px;
        background: rgba(255, 255, 255, 1);

        position: relative;
    }

    .job-root-draft {
        width: 980px;
        height: 60px;
        background: rgba(255, 255, 255, 1);

        display: flex;
        align-items: center;

        position: relative;
    }

    .job_name {
        font-size: 18px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .job_name_draft {
        font-size: 18px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .detail_group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        width: fit-content;
        height: 15px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);

        position: absolute;
        left: 50px;
        top: 67px;

    }

    /*.detail_group > p {*/
    /*font-size: 14px;*/
    /*font-weight: 400;*/
    /*color: rgba(102, 102, 102, 1);*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    /*border-right: 1px solid rgba(102, 102, 102, 1);*/
    /*}*/

    /*.detail_group :first-child {*/
    /*padding-left: 0;*/
    /*padding-right: 10px;*/
    /*border-right: 1px solid rgba(102, 102, 102, 1);*/
    /*}*/

    /*.detail_group :last-child {*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    /*border: none;*/
    /*}*/

    .v_s {
        height: 15px;
        width: 1px;
        background: rgba(102, 102, 102, 1);
    }

    .job_info {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

        position: absolute;
        left: 553px;
        top: 70px;
    }

    .job_info_draft {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

        position: absolute;
        left: 590px;
        /*top: 20px;*/
    }

    .job_salary {
        margin-left: 21px;
    }

    .job_time {
        position: absolute;
        left: 682px;
        top: 69px;
    }

    .edit_class {
        width: 80px;
        height: 30px;
        background: rgba(74, 176, 207, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

        border: none;

        position: absolute;
    }

    .edit_pos_0 {
        left: 840px;
        top: 62px;
    }

    .edit_pos_1 {
        left: 840px;
        top: 20px;
    }

    .edit_pos_2 {
        left: 840px;
        top: 20px;
    }

    .edit_pos_4 {
        left: 750px;
        top: 15px;
    }

    .valid_pos {
        position: absolute;
        right: 60px;
        top: 20px;
    }

    .valid_cls_0 {
        font-size: 20px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
    }

    .valid_cls_1 {
        font-size: 20px;
        font-weight: 400;
        color: rgba(221, 58, 49, 1);
    }

    .pause_cls {
        width: 80px;
        height: 30px;
        background: rgba(240, 147, 56, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

        border: none;

        position: absolute;
        right: 60px;
        top: 62px;
    }

    .online_cls {
        width: 80px;
        height: 30px;
        background: rgba(0, 154, 68, 1);
        border-radius: 5px;

        border: none;

        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

        position: absolute;
        right: 60px;
        top: 62px;
    }

    .re_cls {
        width: 80px;
        height: 30px;
        background: rgba(0, 154, 68, 1);
        border-radius: 5px;

        border: none;

        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

        position: absolute;
        right: 60px;
        top: 62px;
    }

    .closed_cls {
        font-size: 14px;
        font-weight: 400;
        color: rgba(221, 58, 49, 1);


        position: absolute;
        left: 748px;
        top: 70px;
    }

    .del_cls {
        width: 80px;
        height: 30px;
        background: rgba(240, 147, 56, 1);
        border-radius: 5px;

        border: none;

        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

        position: absolute;
        left: 850px;
        top: 15px;
    }

    .first_line {
        display: flex;
        align-items: flex-end;
        /*border: 1px red solid;*/

        width: fit-content;
        height: fit-content;

        position: absolute;
        left: 49px;
        top: 30px;
    }

    .first_line_draft {
        display: flex;
        align-items: flex-end;
        /*border: 1px red solid;*/

        width: fit-content;
        height: fit-content;

        position: absolute;
        left: 49px;
        /*top: 16px;*/
    }
</style>